<template>
  <div class="order-detail">
    <div v-if="order" class="detail-content">
      <!-- 订单基本信息 -->
      <div class="detail-section">
        <h3>订单基本信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <label>订单编号</label>
            <span class="order-code">{{ order.orderCode }}</span>
          </div>
          <div class="info-item">
            <label>订单状态</label>
            <span class="status" :class="(order.orderStatus || order.status || 'pending').toLowerCase()">
              {{ getStatusText(order.orderStatus || order.status) || '待处理' }}
            </span>
          </div>
          <div class="info-item">
            <label>创建时间</label>
            <span>{{ formatDate(order.orderDate) }}</span>
          </div>
          <div class="info-item">
            <label>配送时间</label>
            <span>{{ formatDate(order.deliveryDate) }}</span>
          </div>
        </div>
      </div>

      <!-- 客户信息 -->
      <div class="detail-section">
        <h3>客户信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <label>客户姓名</label>
            <span>{{ order.customerName || '未填写' }}</span>
          </div>
          <div class="info-item">
            <label>联系电话</label>
            <span>{{ order.customerPhone || '未填写' }}</span>
          </div>
          <div class="info-item">
            <label>客户类型</label>
            <span class="customer-type" :class="order.customerType.toLowerCase()">
              {{ order.customerType === 'VIP' ? 'VIP会员' : '散户' }}
            </span>
          </div>
          <div class="info-item">
            <label>配送地址</label>
            <span>{{ order.shippingAddress || '未填写' }}</span>
          </div>
        </div>
      </div>

      <!-- 订单明细 -->
      <div class="detail-section">
        <h3>订单明细</h3>
        <div class="order-items">
          <div class="items-header">
            <div class="header-cell">商品名称</div>
            <div class="header-cell">商品编码</div>
            <div class="header-cell">单价</div>
            <div class="header-cell">数量</div>
            <div class="header-cell">折扣率</div>
            <div class="header-cell">小计</div>
          </div>
          <div v-for="(item, index) in (order.orderItems || order.items || [])" :key="index" class="order-item">
            <div class="item-cell">{{ item.productName || '商品名称未填写' }}</div>
            <div class="item-cell">{{ item.productCode || '商品编码未填写' }}</div>
            <div class="item-cell">¥{{ (item.unitPrice || 0).toFixed(2) }}</div>
            <div class="item-cell">{{ item.quantity || 0 }}</div>
            <div class="item-cell">{{ ((item.discountRate || 0) * 100).toFixed(1) }}%</div>
            <div class="item-cell">¥{{ (item.itemTotalAmount || 0).toFixed(2) }}</div>
          </div>
        </div>
      </div>

      <!-- 支付信息 -->
      <div class="detail-section">
        <h3>支付信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <label>支付方式</label>
            <span>{{ getPaymentMethodText(order.paymentMethod) }}</span>
          </div>
          <div class="info-item">
            <label>预付款使用</label>
            <span>¥{{ (order.prepaymentUsed || 0).toFixed(2) }}</span>
          </div>
          <div class="info-item">
            <label>积分使用</label>
            <span>{{ order.pointsUsed || 0 }} 积分</span>
          </div>
          <div class="info-item">
            <label>获得积分</label>
            <span>{{ order.pointsEarned || 0 }} 积分</span>
          </div>
        </div>
      </div>

      <!-- 订单汇总 -->
      <div class="detail-section">
        <h3>订单汇总</h3>
        <div class="order-summary">
          <div class="summary-row">
            <span>商品总金额:</span>
            <span>¥{{ (order.totalAmount || 0).toFixed(2) }}</span>
          </div>
          <div class="summary-row">
            <span>折扣金额:</span>
            <span>-¥{{ (order.discountAmount || 0).toFixed(2) }}</span>
          </div>
          <div class="summary-row">
            <span>预付款使用:</span>
            <span>-¥{{ (order.prepaymentUsed || 0).toFixed(2) }}</span>
          </div>
          <div class="summary-row">
            <span>积分使用:</span>
            <span>-¥{{ ((order.pointsUsed || 0) * 0.01).toFixed(2) }}</span>
          </div>
          <div class="summary-row">
            <span>税费 (13%):</span>
            <span>¥{{ (order.taxAmount || 0).toFixed(2) }}</span>
          </div>
          <div class="summary-row total">
            <span>最终金额:</span>
            <span>¥{{ (order.finalAmount || 0).toFixed(2) }}</span>
          </div>
        </div>
      </div>

      <!-- 订单跟踪 -->
      <div class="detail-section">
        <h3>订单跟踪</h3>
        <div class="tracking-timeline">
          <div v-for="(track, index) in orderTracking" :key="index" class="timeline-item">
            <div class="timeline-dot" :class="track.statusType"></div>
            <div class="timeline-content">
              <div class="timeline-title">{{ track.statusDescription }}</div>
              <div class="timeline-time">{{ formatDateTime(track.timestamp) }}</div>
              <div v-if="track.operatorName" class="timeline-operator">
                操作人: {{ track.operatorName }}
              </div>
              <div v-if="track.location" class="timeline-location">
                位置: {{ track.location }}
              </div>
              <div v-if="track.remark" class="timeline-remark">
                {{ track.remark }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 备注信息 -->
      <div v-if="order.remark" class="detail-section">
        <h3>备注信息</h3>
        <div class="remark-content">
          {{ order.remark }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'OrderDetailView',
  props: {
    order: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const orderTracking = ref([])
    
    // 获取状态文本
    const getStatusText = (status) => {
      const statuses = {
        'Pending': '待处理',
        'Processing': '处理中',
        'Shipped': '已发货',
        'Delivered': '已送达',
        'Cancelled': '已取消'
      }
      return statuses[status] || status
    }
    
    // 获取支付方式文本
    const getPaymentMethodText = (method) => {
      const methods = {
        'Cash': '现金',
        'Card': '银行卡',
        'Mixed': '混合支付',
        'Prepayment': '预付款',
        'Points': '积分'
      }
      return methods[method] || method
    }
    
    // 格式化日期
    const formatDate = (date) => {
      return new Date(date).toLocaleDateString('zh-CN')
    }
    
    // 格式化日期时间
    const formatDateTime = (dateTime) => {
      if (!dateTime) return '未设置'
      return new Date(dateTime).toLocaleString('zh-CN')
    }
    
    // 加载订单跟踪信息
    const loadOrderTracking = async () => {
      try {
        const response = await fetch(`/api/retail/tracking/order/${props.order.id}`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.getItem('token')}`
          }
        })
        
        if (response.ok) {
          const data = await response.json()
          orderTracking.value = data || []
        } else {
          console.error('加载订单跟踪信息失败:', response.statusText)
          orderTracking.value = []
        }
      } catch (error) {
        console.error('加载订单跟踪信息失败:', error)
        orderTracking.value = []
      }
    }
    
    onMounted(() => {
      loadOrderTracking()
    })
    
    return {
      orderTracking,
      getStatusText,
      getPaymentMethodText,
      formatDate,
      formatDateTime
    }
  }
}
</script>

<style scoped>
.order-detail {
  max-width: 1000px;
  margin: 0 auto;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-section {
  background: #f8fafc;
  border-radius: 8px;
  padding: 24px;
}

.detail-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item label {
  font-weight: 500;
  color: #4a5568;
  font-size: 0.875rem;
}

.info-item span {
  color: #2d3748;
  font-size: 0.875rem;
}

.order-code {
  font-weight: 600;
  color: #667eea;
  font-size: 1rem;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}

.status.pending {
  background: #fef5e7;
  color: #744210;
}

.status.processing {
  background: #bee3f8;
  color: #1a365d;
}

.status.shipped {
  background: #c6f6d5;
  color: #22543d;
}

.status.delivered {
  background: #e6fffa;
  color: #234e52;
}

.status.cancelled {
  background: #fed7d7;
  color: #742a2a;
}

.customer-type {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}

.customer-type.vip {
  background: #fef5e7;
  color: #744210;
}

.customer-type.individual {
  background: #e6fffa;
  color: #234e52;
}

.order-items {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

.items-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  background: #f7fafc;
  padding: 12px 16px;
  font-weight: 600;
  color: #4a5568;
  border-bottom: 1px solid #e2e8f0;
}

.order-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.order-item:last-child {
  border-bottom: none;
}

.item-cell {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #2d3748;
}

.order-summary {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.summary-row.total {
  font-weight: 600;
  font-size: 1.1rem;
  color: #2d3748;
  border-bottom: none;
  border-top: 2px solid #e2e8f0;
  margin-top: 8px;
  padding-top: 12px;
}

.tracking-timeline {
  position: relative;
  padding-left: 24px;
}

.tracking-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
}

.timeline-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: white;
}

.timeline-dot.下单 {
  background: #48bb78;
  border-color: #48bb78;
}

.timeline-dot.出库 {
  background: #3182ce;
  border-color: #3182ce;
}

.timeline-dot.配送 {
  background: #ed8936;
  border-color: #ed8936;
}

.timeline-dot.完成 {
  background: #38a169;
  border-color: #38a169;
}

.timeline-dot.取消 {
  background: #e53e3e;
  border-color: #e53e3e;
}

.timeline-content {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
}

.timeline-title {
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 4px;
}

.timeline-time {
  font-size: 0.875rem;
  color: #718096;
  margin-bottom: 4px;
}

.timeline-operator,
.timeline-location {
  font-size: 0.875rem;
  color: #4a5568;
  margin-bottom: 4px;
}

.timeline-remark {
  font-size: 0.875rem;
  color: #718096;
  font-style: italic;
}

.remark-content {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  color: #2d3748;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .items-header,
  .order-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .items-header {
    display: none;
  }
  
  .order-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .item-cell::before {
    content: attr(data-label) ': ';
    font-weight: 500;
    color: #4a5568;
  }
}
</style>
